---
import FormatHTML from "../../lib/FormatHTML.astro"
import Icon from "../../lib/Icon.astro"
import Footer from "../../components/Footer.astro"
import Header from "../../components/Header.astro"
import { getId } from "../../utils/get-id"

import Layout from "../../layouts/Layout.astro"
import {
    type PageProject,
    needsProjectPage,
    isProjectLink,
} from "../../api/projects"

export async function getStaticPaths() {
    const allProjects: PageProject[] = await Astro.glob(
        "../../content/projects/*.md",
    )
    const projects = allProjects.filter(needsProjectPage)

    return projects.map((project) => {
        return {
            params: { id: getId(project) },
            props: { project: project },
        }
    })
}

export interface Props {
    project: PageProject
}

const { project } = Astro.props
const { title, cover, color = "", images = [], link } = project.frontmatter

const hasPage = !isProjectLink(link)
---

<Layout title={title} style={{ "--accent-color": color }}>
    <Header sticky>
        <a slot="back" href="/portfolio" class="link--back">
            <Icon name="arrow-left" />
            Портфолио
        </a>
    </Header>
    <section class="container">
        <div>
            <h1>
                {hasPage ? <a href={link}>{title}</a> : title}
            </h1>
            <FormatHTML html={project} />
            {
                hasPage && (
                    <a class="go" href={link}>
                        Перейти
                    </a>
                )
            }
        </div>
        {cover && <img class="cover" src={cover} alt={title} />}
    </section>

    {images.map(({ src, alt }) => <img src={src} alt={alt} />)}

    <div class="container footer__wrapper">
        <Footer />
    </div>
</Layout>

<style>
    body {
        margin: 0;
    }
    h1 {
        color: var(--accent-color);
    }
    a {
        color: inherit;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    * {
        box-sizing: border-box;
    }
    .container {
        width: calc(100% - 3em);
        max-width: 800px;
        margin: 0 auto;
        padding-block: 2em;
    }
    .go {
        background-color: var(--accent-color);
        color: white;
        padding: 0.5em 1.5em;
        border-radius: 3px;
        transition: all 0.3s;
        display: block;
        margin-left: auto;
        width: max-content;
        &:hover {
            text-decoration: none;
            background-color: color-mix(
                in srgb,
                var(--accent-color) 80%,
                var(--background-color)
            );
        }
        &:active {
            transform: scale(0.9);
        }
    }
    h1 {
        margin: 0;
    }

    .footer__wrapper {
        padding: 2em 0;
    }
    img {
        width: 100%;
        display: block;
    }
    section {
        display: flex;
        gap: 2em;
        margin-bottom: 4em;
        justify-content: space-between;
    }
    @media (width < 830px) {
        section {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
    .cover {
        margin: 0 auto;
        object-fit: cover;
        align-self: end;
    }
</style>
